import React, { useEffect, useState } from 'react';
import styles from './index.module.css';
import { useNavigate } from 'react-router-dom';
import { Song, Playlist, ApiResponse } from './types';

const API_BASE_URL = 'http://localhost:3000';

const MusicHome: React.FC = () => {
  const navigate = useNavigate();
  const [recentSongs, setRecentSongs] = useState<Song[]>([]);
  const [playlists, setPlaylists] = useState<Playlist[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [songsRes, playlistsRes] = await Promise.all([
          fetch(`${API_BASE_URL}/api/songs`),
          fetch(`${API_BASE_URL}/api/playlists`)
        ]);

        const songsData: ApiResponse<Song[]> = await songsRes.json();
        const playlistsData: ApiResponse<Playlist[]> = await playlistsRes.json();

        if (songsData.code === 0) {
          setRecentSongs(songsData.data.slice(0, 3));
        }
        if (playlistsData.code === 0) {
          setPlaylists(playlistsData.data.slice(0, 3));
        }
      } catch (error) {
        console.error('Failed to fetch data:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  // 处理登录点击
  const handleLogin = () => {
    navigate('/login');
  };

  // 处理导航点击
  const handleNavClick = (path: string) => {
    navigate(path);
  };

  if (isLoading) {
    return <div className={styles.loading}>加载中...</div>;
  }

  return (
    <div className={styles.container}>
      {/* 顶部登录区域 */}
      <div className={styles.loginSection}>
        <div className={styles.userAvatar}>
          <img src="/default-avatar.png" alt="用户头像" />
        </div>
        <button className={styles.loginButton} onClick={handleLogin}>
          立即登录
        </button>
      </div>

      {/* 导航菜单 */}
      <div className={styles.navMenu}>
        <div className={styles.navItem} onClick={() => handleNavClick('/local')}>
          <i className={styles.iconLocal}></i>
          <span>本地音乐</span>
        </div>
        <div className={styles.navItem} onClick={() => handleNavClick('/radio')}>
          <i className={styles.iconRadio}></i>
          <span>我的电台</span>
        </div>
        <div className={styles.navItem} onClick={() => handleNavClick('/favorites')}>
          <i className={styles.iconFavorite}></i>
          <span>我的收藏</span>
        </div>
        <div className={styles.navItem} onClick={() => handleNavClick('/recent')}>
          <i className={styles.iconRecent}></i>
          <span>关注新歌</span>
        </div>
      </div>

      {/* 我的音乐区域 */}
      <div className={styles.myMusicSection}>
        <div className={styles.sectionHeader}>
          <h2>我的音乐</h2>
          <span className={styles.more} onClick={() => handleNavClick('/my-music')}>更多&gt;&gt;</span>
        </div>
        <div className={styles.musicCards}>
          <div className={styles.musicCard} onClick={() => handleNavClick('/favorites')}>
            <div className={styles.cardContent}>
              <i className={styles.iconHeart}></i>
              <span>我喜欢的音乐</span>
            </div>
            <div className={styles.cardLabel}>心动模式</div>
          </div>
          <div className={styles.musicCard} onClick={() => handleNavClick('/fm')}>
            <div className={styles.cardContent}>
              <i className={styles.iconFM}></i>
              <span>私人FM</span>
            </div>
            <div className={styles.cardLabel}>听点新鲜的</div>
          </div>
          <div className={styles.musicCard} onClick={() => handleNavClick('/drive')}>
            <div className={styles.cardContent}>
              <i className={styles.iconCar}></i>
              <span>驾驶模式</span>
            </div>
            <div className={styles.cardLabel}>开车安全模式</div>
          </div>
        </div>
      </div>

      {/* 最近播放区域 */}
      {recentSongs.length > 0 && (
        <div className={styles.recentSection}>
          <div className={styles.sectionHeader}>
            <h2>最近播放</h2>
            <span className={styles.more} onClick={() => handleNavClick('/recent-plays')}>更多&gt;&gt;</span>
          </div>
          <div className={styles.songList}>
            {recentSongs.map(song => (
              <div key={song.id} className={styles.songItem}>
                <img src={song.cover} alt={song.name} className={styles.songCover} />
                <div className={styles.songInfo}>
                  <div className={styles.songName}>{song.name}</div>
                  <div className={styles.songArtist}>{song.artist}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 底部导航栏 */}
      <div className={styles.bottomNav}>
        <div className={styles.bottomNavItem} onClick={() => handleNavClick('/discover')}>
          <i className={styles.iconDiscover}></i>
          <span>发现</span>
        </div>
        <div className={styles.bottomNavItem} onClick={() => handleNavClick('/video')}>
          <i className={styles.iconVideo}></i>
          <span>视频</span>
        </div>
        <div className={`${styles.bottomNavItem} ${styles.active}`}>
          <i className={styles.iconMine}></i>
          <span>我的</span>
        </div>
        <div className={styles.bottomNavItem} onClick={() => handleNavClick('/community')}>
          <i className={styles.iconCommunity}></i>
          <span>云村</span>
        </div>
        <div className={styles.bottomNavItem} onClick={() => handleNavClick('/account')}>
          <i className={styles.iconAccount}></i>
          <span>账号</span>
        </div>
      </div>
    </div>
  );
};

export default MusicHome; 